<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { WalletAxios } from "@/api";
import { ref, onMounted } from "vue";
import { Field, showToast, showLoadingToast, closeToast, showConfirmDialog } from "vant";
import { useRouter } from "vue-router";
const router = useRouter();
const { t } = useI18n();
const methodsList: any = ref([]);
const selectIndex: any = ref(0);
const openingName = ref("");
const receivingAccount = ref("");
const updateType = ref(false);
onMounted(() => {
  getEpayPaymentMethods();
  getUserEpayBankCardList();
});
const getEpayPaymentMethods = () => {
  WalletAxios.getEpayPaymentMethods().then(res => {
    methodsList.value = res.paymentMethod.withdrawBanks;
  });
};
const bankCardList: any = ref([]);
//获取银行卡
const getUserEpayBankCardList = () => {
  showLoadingToast({
    message: "loading...",
    forbidClick: true,
  });
  WalletAxios.getUserEpayBankCardList()
    .then(res => {
      bankCardList.value = res.data;
      // if (bankCardList.value.length > 0) {
      //   openingName.value = bankCardList.value[0].openingName;
      // }
      closeToast();
    })
    .catch(() => {
      closeToast();
    });
};
//选择提现类型
const getSelect = index => {
  selectIndex.value = index;
};
//是否可以提交
const submitType = ref(false);
//监听用户名
const accountInput = e => {
  if (!updateType.value) {
    updateType.value = true;
  }
  if (e !== "" && verifyCardsNum(receivingAccount.value)) {
    submitType.value = true;
  } else {
    submitType.value = false;
  }
};
const receivingType = ref(false);
//监听银行卡号
const receivingAccountInput = () => {
  if (!receivingType.value) {
    receivingType.value = true;
  }
  if (verifyCardsNum(receivingAccount.value) && openingName.value !== "") {
    submitType.value = true;
  } else {
    submitType.value = false;
  }
};
function verifyCardsNum(text) {
  if (text !== "") {
    const cardVerify = new RegExp(/^[a-zA-Z0-9_]{11}$/);
    if (cardVerify.test(text)) {
      return true;
    } else {
      return false;
    }
  }
}
//提交数据
const submitCard = () => {
  const data = {
    openingBank: methodsList.value[selectIndex.value].bank,
    openingBankCode: methodsList.value[selectIndex.value].bankCode[0],
    openingName: openingName.value,
    receivingAccount: receivingAccount.value,
  };
  if (
    data.openingBank &&
    data.openingBankCode &&
    data.openingName !== "" &&
    verifyCardsNum(data.receivingAccount)
  ) {
    WalletAxios.userBindEpayBankCard(data).then(res => {
      if (res.code === 0) {
        showToast({
          message: "success",
          icon: "passed",
          onClose: () => {
            router.back();
          },
        });
      } else if (res.code === 1013) {
        showConfirmDialog({
          //用户打码量不为0，不让提现
          title: t("withdrawals.showConfirmDialog.title"),
          message: t("withdrawals.showConfirmDialog.code1013"),
          confirmButtonText: t("withdrawals.confirmationButtom"),
          overlayStyle: { backgroundColor: "#00000099" },
        });
      }
    });
  }
};
//把字符串除了第一个其他的都变成*
function maskStringExceptFirst(str) {
  if (str.length === 0) return ""; // 如果字符串为空，返回空字符串
  return str.charAt(0) + "*".repeat(str.length - 1); // 保留第一个字符，其余字符替换为*
}
</script>
<template>
  <!-- 孟加拉添加卡 -->
  <div class="add-cards-frame">
    <div class="add-cards-content">
      <div class="addWalletTitle-frame">
        {{ t("withdrawals.addWalletTitle") }}
      </div>
      <div class="card-img df ai-center jc-center">
        <img src="@/image/new_img/home/recharge/yinhangka.png" />
        {{ t("withdrawals.Ewallet") }}
      </div>
      <div class="addWallet-list">
        <div class="addWalletTitle-frame">
          {{ t("withdrawals.walletType") }}
        </div>
        <div class="show-more-container df ai-center">
          <div
            class="change-item-animate df ai-center jc-center"
            v-for="(item, index) in methodsList"
            :key="index"
            :class="[index == 4 ? 'right0' : '', index == selectIndex ? 'select-index' : '']"
            @click="getSelect(index)"
          >
            <div>
              <div class="vcn-list-text">
                {{ item.bank.substr(4) }}
              </div>
            </div>
            <div class="select-frame" v-show="index == selectIndex"></div>
          </div>
        </div>
      </div>

      <div class="account-form-group">
        <div>
          <div
            class="account-set df ai-center"
            :class="{
              'account-Error': openingName === '' && updateType,
              'is-cards': bankCardList.length > 0,
            }"
          >
            <img src="@/image/new_img/home/recharge/account-img.png" />
            <Field
              v-model="openingName"
              type="text"
              :placeholder="t('withdrawals.accountInputPlaceholder')"
              @update:model-value="accountInput"
            />
            <!-- <div class="openingName-frame" v-if="bankCardList.length > 0">
              {{ maskStringExceptFirst(bankCardList[0].openingName) }}
            </div> -->
          </div>
          <div class="input-error-frame input-error-frame1">
            {{ t("withdrawals.accountInputError") }}
            <div v-show="openingName === '' && updateType">
              {{ t("withdrawals.accountInputError2") }}
            </div>
          </div>
        </div>
        <!-- 银行号 -->
        <div>
          <div
            class="account-set df ai-center top10"
            :class="{ 'account-Error': receivingAccount.length < 6 && receivingType }"
          >
            <img class="crad-number-img" src="@/image/new_img/home/recharge/crad-number-img.png" />
            <Field
              v-model="receivingAccount"
              type="number"
              :placeholder="t('withdrawals.cardInputPlaceholder')"
              @update:model-value="receivingAccountInput"
            />
          </div>
          <div
            class="input-error-frame"
            v-show="!verifyCardsNum(receivingAccount) && receivingAccount !== ''"
          >
            {{ t("withdrawals.receivingAccountError") }}
          </div>
        </div>
      </div>
      <div class="submit-frame" :class="{ 'submit-true': submitType }" @click="submitCard">
        {{ t("withdrawals.submit") }}
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.add-cards-frame {
  width: 100%;
  height: 100%;
  background-image: url(/src/image/new_img/main_bg_2.png);
  overflow-y: auto;
  .add-cards-content {
    width: calc(100% - 84px);
    height: auto;
    padding-top: 40px;
    margin: auto;
    .addWalletTitle-frame {
      width: 100%;
      height: auto;
      color: rgba(255, 255, 255, 0.85);
      font-size: 28px;
      .addWallet-list {
        width: 100%;
        height: auto;
      }
    }
    .show-more-container {
      width: 100%;
      height: auto;
      overflow-x: auto;
      margin-top: 20px;
      &::-webkit-scrollbar {
        display: none;
        overflow: -moz-scrollbars-none; /* Firefox */
        -ms-overflow-style: none; /* IE 和 Edge */
      }
      .change-item-animate {
        min-width: 198px;
        height: 64px;
        border-radius: 10px;
        text-align: center;
        margin-right: 20px;
        color: rgba(255, 255, 255, 0.65);
        background-color: rgba(255, 255, 255, 0.15);
        position: relative;
        left: 0;
        top: 0;
        img {
          width: 75px;
          height: 75px;
        }
        .vcn-list-text {
          width: 100%;
          text-align: center;
          font-size: 28px;
        }
      }
      .select-index {
        // border: 1px solid #ff3039;
        background-color: #ab3fe7;
        color: #ffffff;
      }
      .right0 {
        margin-right: 0;
      }
      .select-frame {
        position: absolute;
        right: 0;
        width: 32px;
        height: 32px;
        bottom: 0;
        fill: #ab3fe7;
      }
    }
    .card-img {
      width: 188px;
      height: 80px;
      background-image: linear-gradient(67deg, #fe7919 0%, #ab3fe7 100%);
      border-radius: 20px;
      margin-top: 20px;
      margin-bottom: 40px;
      color: #fff;
      font-size: 28px;
      img {
        width: 32px;
        height: 28px;
        margin-right: 10px;
      }
    }
  }
}
.account-form-group {
  width: 100%;
  height: auto;
  margin-top: 40px;
  .account-set {
    width: 100%;
    height: 100px;
    border-radius: 32px;
    background-color: rgba(255, 255, 255, 0.04);
    img {
      width: 44px;
      height: 38px;
      margin-left: 25px;
    }
  }
  .is-cards {
    background-color: rgba(255, 255, 255, 0.04);
  }
  ::v-deep .van-field__control::-webkit-input-placeholder {
    color: #a1a1a1;
    font-size: 26px;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  ::v-deep .van-field__control {
    height: 58px;
    // padding-top: 4px;
    color: #ffffff;
    font-size: 26px;
  }
  .input-error-frame {
    color: rgba(255, 255, 255, 0.45);
    font-size: 22px;
    width: 100%;
    height: auto;
    margin-top: 10px;
    line-height: 40px;
  }
  .input-error-frame1 {
    font-size: 24px;
  }
  .account-Error {
    border: 2px solid #e4393c;
  }
  .top10 {
    margin-top: 20px;
  }
}
// .submit-frame {
//   width: 100%;
//   height: 96px;
//   text-align: center;
//   line-height: 96px;
//   border-radius: 10px;
//   background-color: #d8d8d8;
//   color: #333;
//   margin-bottom: 100px;
//   font-size: 38px;
//   margin-top: 40px;
//   box-shadow: 0 0.05rem 0.189rem 0.021rem rgba(5, 0, 0, 0.11);
// }
.submit-frame {
  width: 250px;
  height: 96px;
  text-align: center;
  line-height: 96px;
  border-radius: 33px;
  color: rgba(255, 255, 255, 0.25);
  margin-bottom: 100px;
  font-size: 32px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin: auto;
  margin-top: 100px;
}
.submit-true {
  // color: #ffffff;
  // box-shadow: 0 0.1rem 0.2rem 0 rgba(255, 0, 16, 0.4);
  // background-color: #ff3a3e;
  color: #ffffff;
  background-image: linear-gradient(69deg, #fe7919 0%, #ab3fe7 100%);
}
.openingName-frame {
  font-size: 30px;
  color: #a5a6a6;
  margin-left: 30px;
}
.is-cards {
  background-color: #c1c1c1;
}
:deep(.van-field__control) {
  &::placeholder {
    white-space: pre-wrap;
    word-wrap: break-word;
    height: 100px;
  }
}
// :deep(.van-cell) {
//   padding: 10px 8px;
// }
.crad-number-img {
  width: 40px;
  height: 40px;
}
</style>
